<template>
	<view class="content">
		<view class="ld">
			<view class="left">
				<view v-for="(item,index) in classifyData" :key="index" @click="setid(index)"
					:class="classifyDataIndex==index?'active':'activeDefault'">
					{{item.groupName}}
				</view>
			</view>
			<view class="right">
				<view class="stickyBox">
					<view class="beforeActive" style="display: flex;justify-content: center;">
						<template v-for="(items,index) in classifyData[classifyDataIndex].children" :key="index">
							<view class="categoryName" @click="classifyActive(index,$event,items,classifyDataIndex)"
								:class="activeClassify == index ? 'activeClass':'categoryName'" style="margin: 0 10px ;">{{items.groupName}}
							</view>
						</template>
					</view>
				</view>
				<scroll-view :scroll-y="true" style="white-space: nowrap;height: 200px;" :scroll-into-view="clickId"
					:scroll-with-animation="true" @scroll="scroll" @scrolltolower="scrolltolower ">
					<template  v-for="(classifyDataModel,classifyDataIndex) in classifyData" :key="classifyDataIndex">
							<view class="" v-for="(item,index) in classifyDataModel.children" :key='index' :class="classifyData.length==classifyDataIndex+1&&classifyDataModel.children.length==index+1?'classifyDataMinHeght':''">
								<view class="title"  :id="'Index_'+classifyDataIndex+'_'+index">
									<view class="">- {{item.groupName}} -</view>
								</view>
								<template v-if="item.goodsSalesList.length!=0">
									<view class="" v-for="(dd,ee) in item.goodsSalesList" :key='ee' style="padding:30px 0;">
										{{dd.salesName}}
									</view>
								</template>
								<template v-else>
									<view class="goods-details-box2" style="padding:30px 0;">暂无商品</view>
								</template>
							</view>
					</template>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script >
	export default {
		data() {
			return {
				classifyData: [//数据格式
					{
						id:11,
						groupName: "大类1",
						children: [
							{
								id:1,
								groupName:'子类1-1',
								goodsSalesList:[
									{salesId: "101",salesName:'订单1-1'},
									{salesId: "102",salesName:'订单1-2'},
								]
							},
							{
								id:2,
								groupName:'子类1-2',
								goodsSalesList:[
									{salesId: "201",salesName:'订单2-1'},
									{salesId: "202",salesName:'订单2-2'},
								]
							}
						],
					},{
						id:22,
						groupName: "大类2",
						children: [
							{
								id:3,
								groupName:'子类2-1',
								goodsSalesList:[
									{salesId: "301",salesName:'订单3-1'},
									{salesId: "302",salesName:'订单3-2'},
								]
							},
							{
								id:4,
								groupName:'子类2-2',
								goodsSalesList:[
									{salesId: "401",salesName:'订单4-1'},
									{salesId: "402",salesName:'订单4-2'},
								]
							}
						],
					},{
						id:33,
						groupName: "大类3",
						children: [
							{
								id:5,
								groupName:'子类3-1',
								goodsSalesList:[
									{salesId: "501",salesName:'订单5-1'},
									{salesId: "502",salesName:'订单5-2'},
								]
							},
							{
								id:4,
								groupName:'子类2-2',
								goodsSalesList:[]
							}
						],
					},
				],
				clickId: "",
				classifyDataIndex: 0,//默认展示的大类下标
				activeClassify:0,//默认展示的子类下标
				RightTopArr:[],
			}
		},
		onReady() {
			this.getList(); //初始化加载
			this.getNodesInfo();
			
		},
		onLoad() {
			
		},
		methods: {
			getList() {},//此处调接口拿到数据并自行处理
			setid(i) {//点击大类
				this.classifyDataIndex = i;
				this.activeClassify=0;//子类状态
				this.clickId ='Index_'+i+'_'+0
			},
			classifyActive(index, event, items,classifyDataIndex){//点击子类
				this.classifyDataIndex=classifyDataIndex;//大类状态与下标一致
				this.activeClassify=index;//子类状态
				
				this.clickId='Index_'+this.classifyDataIndex+'_'+this.activeClassify;
			},
		    scroll(e) {//右侧商品滚动
				let scrollTop = e.target.scrollTop;
				console.log(scrollTop,'scrollTop')
				for(let  index  in this.RightTopArr){
					let data=this.RightTopArr[index];
					if(e.target.scrollTop>=data.height && index==this.RightTopArr.length-1?true:e.target.scrollTop <this.RightTopArr[parseInt(index)+1].height){
						  let myArrData =data.id.split("_");
						   this.classifyDataIndex=myArrData[1];
						   this.activeClassify=myArrData[2];
						return ;
					}
				}
			},
			getNodesInfo() {//滚动的距离
				new Promise(resolve => {
					let selectorQuery = uni.createSelectorQuery();
					// 获取节点的位置信息
					selectorQuery.selectAll('.title').boundingClientRect((rects) => {
						// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
						if (!rects.length) {
							setTimeout(() => {
								this.getNodesInfo();
							}, 10);
							return;
						}
						// 生成之后开始添加进去数组
						rects.forEach((rect) => {
							console.log(this.RightTopArr,'this.RightTopArr')
							let tops=rect.top - rects[0].top;// 这里减去rects[0].top，是因为第一项顶部不是贴到导航栏=>每一个商品距离顶部的高度，如果此页面顶部没有其他的view那就不用减去rects[0].top，自己视情况而定。
							this.RightTopArr.push({height:tops,id:rect.id}); 
							resolve();
						})
					}).exec()
				})
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件
			scrolltolower() {
				setTimeout(() => {
					// this.classifyDataIndex = this.classifyData.length;
					console.log('滚动到底部了')
				}, 10)
			},
		}
	}
</script>
<style lang="scss" scoped>
	.stickyBox {
		width: 80%;
		display: flex;
		background-color: #FFFFFF;
		.beforeActive {
			width: 600rpx;
			height: 85rpx;
			overflow: hidden;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			.categoryName {
				margin: 20rpx;
				padding: 10rpx;
				background-color: #E5E5E5;
				height: 30rpx;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 28rpx;
				color: #333333;
				opacity: 1;
			}
	
			.activeClass {
				margin: 20rpx;
				padding: 10rpx;
				background-color: #333333;
				height: 30rpx;
				font-size: 20rpx;
				font-weight: 400;
				line-height: 28rpx;
				color: #FFFFFF;
				opacity: 1;
			}
		}
	
		.active {
			width: 600rpx;
			height: auto;
			overflow: visible;
			display: flex;
			justify-content: flex-start;
		}
	}
	
	.ld {
		display: flex;
		border: 1px solid black;
 
		.left {
			width: 100px;
			text-align: center;
			border-right: 1px dashed #007AFF;
 
		}
 
		.right {
			flex: 1;
			padding-left: 10px;
		}
	}
 
	.title {
		font-size: 20px;
		font-weight: bold;
		background-color: pink;
	}
	.activeDefault{
		height: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.active {
		background-color: darkgoldenrod;
		height: 50px;
		display: flex;
		    flex-direction: column;
		    align-items: center;
		    color: #ffffff;
		    justify-content: center;
	}
.classifyDataMinHeght{
		min-height: 100vh;
	}
</style>